<template>
  <t-space>
    <t-button theme="primary" @click="onClick">弹出驳回选项框,简单对话框处理</t-button>
    <t-dialog
        v-model:visible="visible"
        header="对话框标题"
        width="40%"
        :confirm-on-enter="true"
        :on-confirm="onConfirmAnother"
    >
      <t-space direction="vertical" style="width: 100%">

        <t-input v-model="form_item" aria-required="true" placeholder="请输入驳回原因"></t-input>

      </t-space>
    </t-dialog>

    <t-dialog
        v-model:visible="visible3"
        theme="warning"
        header="警示"
        body="原因不能为空"
        :on-close="close3"
        :cancel-btn="null"
        @confirm="onClickConfirm"
    />
  </t-space>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import {DialogProps, ButtonProps, FormProps, MessagePlugin} from 'tdesign-vue-next';
const visible = ref(false);
// 弹出表单信息
const form_item = ref("")

// 操作弹出框
const onClick: ButtonProps['onClick'] = (context) => {
  console.log('点击了确认按钮，弹出弹窗', context);
  visible.value = true;
};
// :on-confirm="onConfirmAnother"  如果“确认”按钮存在，则点击“确认”按钮时触发，或者键盘按下回车键时触发
const onConfirmAnother: DialogProps['onConfirm'] = (context) => {
  console.log('点击了确认按钮', context);
  console.log("提交信息", form_item.value)
  if (form_item.value == "") {
    console.log("没有输入原因")
    visible3.value = true
  } else {
    visible.value = false;
  }
};
// :on-close="close"
const close: DialogProps['onClose'] = (context) => {
  console.log('关闭弹窗，点击关闭按钮、按下ESC、点击蒙层等触发', context);
};
//:on-cancel="onCancel"
const onCancel: DialogProps['onCancel'] = (context) => {
  console.log('点击了取消按钮', context);
};
// :on-esc-keydown="onEscKeydown"
const onEscKeydown: DialogProps['onEscKeydown'] = (context) => {
  console.log('按下了ESC', context);
};
//:on-close-btn-click="onCloseBtnClick"
const onCloseBtnClick: DialogProps['onCloseBtnClick'] = (context) => {
  console.log('点击了关闭按钮', context);
};
// :on-overlay-click="onOverlayClick"
const onOverlayClick: DialogProps['onOverlayClick'] = (context) => {
  console.log('点击了蒙层', context);
};

// 输入框校验弹出
const visible3 = ref(false);
const onClickConfirm: DialogProps['onConfirm'] = (context) => {
  const { e } = context;
  visible3.value = false;
  e.stopPropagation();
};
const close3: DialogProps['onClose'] = () => {
  visible3.value = false;
};



</script>
